<template>
  <div class="box">
    <van-list v-model="loading" :finished="finished" finished-text="我是有底线的" @load="onLoad" offset="0" :immediate-check="false">
      <li v-for="item in dataList" :key="item.filmId" @click="goToDetail(item.filmId)">
        <div class="left">
          <img v-lazy="item.poster" alt="">
        </div>
        <div class="center">
          <div>
            <span class="name">{{ item.name }}</span>
            <span class="item">{{ item.item.name }}</span>
          </div>
          <div class="mainactor">
            <span>主演: {{ item.actors | actorfilter }}</span>
          </div>
          <div>
            <span class="address">{{ item.nation }} | {{ item.runtime }}分钟</span>
          </div>
        </div>
        <div class="right" v-if="item.isPresale">
          预购
        </div>
      </li>
    </van-list>
  </div>
</template>

<script>
import http from '../../request/http'
export default {
  name: 'ComingSoon',
  data() {
    return {
      // 电影列表数据
      dataList: [],
      // 是否正在加载中
      loading: false,
      // 是否加载完成
      finished: false,
      // 记录第几页数据
      current: 1,
      // 总电影数据的个数
      total: 0
    }
  },
  methods: {
    goToDetail(myid) {
      this.$router.push('/detail/' + myid)
    },
    onLoad() {
      // 判断当前展示的所有电影个数，是否和请求回来的总个数一致，如果一致，代表在向服务器请求就没有数据了，所以把finished设置为true，代表所有请求已完成
      if (this.dataList.length == this.total) {
        this.finished = true
        return
      }
      this.current++
      http({
        url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.current}&pageSize=10&type=2&k=9423013`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then(res => {
        if (res.status == 0) {
          this.dataList = [...this.dataList, ...res.data.films]
          this.total = res.data.total
          this.loading = false
        }
      })
    }
  },
  mounted() {
    http({
      url: '/gateway?cityId=130100&pageNum=1&pageSize=10&type=2&k=9423013',
      headers: {
        'X-Host': 'mall.film-ticket.film.list'
      }     
    }).then(res => {
      if (res.status == 0) {
        let { films } = res.data
        this.dataList = films
      }
    })
  },
  filters: {
    // 有时候会有电影没有主演的情况，这个时候页面用actors的值就会报错，所以在这儿做一下判断，如果有的话，就把actors数组中每一个值取出来过滤一下返回
    actorfilter(actors) {
      if (actors === undefined) return '暂无主演'
      return actors.map(item => item.name).join(' ')
    }
  }
}
</script>

<style scoped>
.box {
  background: #fff;
}
.van-list {
  margin-left: .15rem;
}
.van-list li {
  display: flex;
  padding: .15rem .15rem .15rem 0;
  height: .94rem;
  position: relative;
  border-bottom: 1px solid #ededed;
}
.left {
  width: .66rem;
  height: .94rem;
  display: block;
}
.left img {
  width: 100%;
  height: 100%;
  display: block;
}
.center {
  width: calc(100% - 1.16rem);
  padding: 0 .1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.right {
  top: .34rem;
  line-height: .25rem;
  height: .25rem;
  width: .5rem;
  color: #ffb232;
  font-size: .13rem;
  text-align: center;
  border-radius: 2px;
  position: relative;
}
.right::after {
  content: " ";
  transform: scale(.5);
  position: absolute;
  border: 1px solid #ffb232;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border-radius: 4px;
}
.item {
  font-size: .09rem;
  color: #fff;
  background-color: #d2d6dc;
  height: .14rem;
  line-height: .14rem;
  padding: 0 .02rem;
  border-radius: 2px;
  vertical-align: middle;
}
.name {
  max-width: calc(100% - .25rem);
  color: #191a1b;
  font-size: .16rem;
  height: .22rem;
  line-height: .22rem;
  margin-right: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.mainactor {
  font-size: .13rem;
  color: #797d82;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.address {
  font-size: .13rem;
  color: #797d82;
}
.center div {
  margin-top: 6px;
}
</style>